<template>
	<el-dialog
		:title="priceInfo.order_no + ' 订单改价'"
		v-model="dialogVisible"
		:append-to-body="true"
		:close-on-click-modal="false"
		width="500px"
	>
		<div v-loading="dataIsLoading">
			<el-form ref="form" :model="priceInfo" label-width="100px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="商品合计">
							{{ getMoneyByMinute(priceInfo.original_total_price) }}
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="总优惠">
							<span class="fushu">-{{ getMoneyByMinute(totalDiscount) }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="改价">
							<el-input v-toFixed="2" v-model="priceInfo.total_price_change" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="原运费">
							{{ getMoneyByMinute(priceInfo.original_dispatch_price) }}
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="运费调整">
							<div>
								<el-input v-toFixed="2" v-model="priceInfo.dispatch_price_change" />
							</div>
							<el-button type="text" class="btn-link" @click="zeroDispatchPrice"
								>免运费</el-button
							>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="原价">
							{{ getMoneyByMinute(original_price) }}
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="改价应付">
							<div :class="payd_class">
								{{ getMoneyByMinute(payd) }}
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="说明">
							<div style="font-weight: 700">*正数为增加费用，负数为优惠</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div style="clear: both"></div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button
					type="primary"
					:loading="btnIsLoad"
					:disabled="!price_is_change"
					@click="sendOrder"
					>提交改价</el-button
				>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import "./common.scss";
export default {
	name: "order-change-price-dialog",
	emits: ["changeOk"],
	data() {
		return {
			dialogVisible: false,
			dataIsLoading: false,
			btnIsLoad: false,
			priceInfo: {},
			returnData: {},
			originalPayd: 0,
			totalDiscount: 0,
			form: {}
		};
	},
	computed: {
		payd() {
			return (
				this.priceInfo.original_total_price +
				this.priceInfo.total_price_change * 100 +
				(this.priceInfo.original_dispatch_price +
					this.priceInfo.dispatch_price_change * 100) - this.totalDiscount
			);
		},
		payd_class() {
			if (this.original_price > this.payd) {
				return "fushu";
			} else if (this.original_price < this.payd) {
				return "zhengshu";
			} else {
				return "";
			}
		},
		original_price() {
			return this.priceInfo.original_total_price + this.priceInfo.original_dispatch_price - this.totalDiscount;
		},
		price_is_change() {
			return this.originalPayd !== this.payd;
		}
	},
	methods: {
		async openDialog(_orderId) {
			console.log(_orderId);
			let _this = this;
			_this.dialogVisible = true;
			if (_orderId) {
				_this.dataIsLoading = true;
				_this.$API.shop.order.priceInfo({ id: _orderId }).then((res) => {
					if (res.code === 0) {
						_this.priceInfo = res;
						_this.priceInfo.total_price_change = _this.getMoneyByMinute(
							_this.priceInfo.total_price_change
						);
						_this.priceInfo.dispatch_price_change = _this.getMoneyByMinute(
							_this.priceInfo.dispatch_price_change
						);
						_this.originalPayd = _this.payd;
						_this.dataIsLoading = false;
					}
					else {
						_this.$message.error('openDialog 失败,' + res.message);
					}
				});
			}
		},
		setDataAndShow(orderRow) {
			let _this = this;
			let totalDiscount = 0;
			orderRow.subs.map((item) => {
				totalDiscount += item.discount;
			});
			_this.totalDiscount = totalDiscount;
			_this.priceInfo = Object.assign({}, orderRow);
			_this.priceInfo.total_price_change = _this.getMoneyByMinute(
				_this.priceInfo.total_price_change
			);
			_this.priceInfo.dispatch_price_change = _this.getMoneyByMinute(
				_this.priceInfo.dispatch_price_change
			);
			_this.originalPayd = _this.payd;
			_this.dialogVisible = true;
		},
		sendOrder() {
			let _this = this;
			_this.dataIsLoading = true;
			let formData = {};
			formData["order_id"] = this.priceInfo.id;
			formData["total_price_change"] = this.priceInfo.total_price_change * 100;
			formData["dispatch_price_change"] = this.priceInfo.dispatch_price_change * 100;
			_this.$API.shop.order
				.setPriceChange(formData)
				.then((res) => {
					if (res.code === 0) {
						_this.$message.success("修改成功");
						_this.dataIsLoading = false;
						_this.closeDialog(true);
					}
					else {
						_this.$message.error('sendOrder 失败,' + res.message);
					}
				})
				.catch((err) => {
					this.$message.error(err);
				});
			setTimeout(function () {
				_this.dataIsLoading = false;
			}, 10000);
		},
		closeDialog(sendData = false) {
			this.dialogVisible = false;
			if (sendData === true) {
				// this.$emit("changeOk", this.priceInfo);
				this.$emit("changeOk", this.returnData);
			}
		},
		getMoneyByMinute(_value) {
			return this.$TOOL.getMoneyByMinute(_value);
		},
		getMoneyColor() {
			if (this.original_price > this.payd) {
				return "fushu";
			} else if (this.original_price < this.payd) {
				return "zhengshu";
			} else {
				return "";
			}
		},
		zeroDispatchPrice() {
			this.priceInfo.dispatch_price_change = -this.getMoneyByMinute(
				this.priceInfo.original_dispatch_price
			);
		}
	}
};
</script>

<style scoped>
.zhengshu {
	color: #f00;
	font-weight: 700;
}
.fushu {
	color: green;
	font-weight: 700;
}
</style>
